<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" />
    <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js" />
        <script type="text/javascript" src="http://www.eyecon.ro/datepicker/js/datepicker.js" />
    
    <!--link rel="stylesheet" href="http://static.jquery.com/ui/css/base2.css" type="text/css" media="all" /-->
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
    <script type="text/javascript">


	$(function() {
	
	/*
  var datepicker_Options_start =  {
          			changeMonth: true,
          			changeYear: true,
                  showOn: 'button',
                  
                  //buttonImage: '/icons/silk/calendar.png',
                  buttonText: "Open datepicker",
                  buttonImage: 'calendar.png',
                  buttonImageOnly: true,
                  altField: '#alternate', 
                  altFormat: 'DD, d MM, yy',
                  yearRange: "-25:+25"
                  //maxDate: '+1M +10D'

		};
		
		  var datepicker_Options_end =  {
          			changeMonth: true,
          			changeYear: true,
                  showOn: 'button',
                  
                  //buttonImage: '/icons/silk/calendar.png',
                  buttonText: "Open datepicker",
                  buttonImage: 'calendar.png',
                  buttonImageOnly: true,
                  altField: '#alternate', 
                  altFormat: 'DD, d MM, yy',
                  yearRange: "-25:+25"
                  //maxDate: '+1M +10D'

		};

             $.datepicker.setDefaults($.extend($.datepicker.regional["fr"]));
             $('#datepicker_start').datepicker(datepicker_Options_start);
             $('#datepicker_end').datepicker(datepicker_Options_end);

	
	*/
	$('#datepicker_start').DatePicker({
                      	format:'m/d/Y',
                      	date: $('#inputDate').val(),
                      	current: $('#inputDate').val(),
                      	starts: 1,
                      	position: 'r',
                      	onBeforeShow: function(){
                      		$('#inputDate').DatePickerSetDate($('#inputDate').val(), true);
                      	},
                      	onChange: function(formated, dates){
                      		$('#inputDate').val(formated);
                      		if ($('#closeOnSelect input').attr('checked')) {
                      			$('#inputDate').DatePickerHide();
                      		}
                      	}
});

	});
	</script>
  </head>
  <body style="background: none">




<div class="demo">

<p>Date début: <input type="text" id="datepicker_start"> <input type="text" id="alternate_start" size="30"/></p>
<p>Date fin : <input type="text" id="datepicker_end"> <input type="text" id="alternate_end" size="30"/></p>


</div><!-- End demo -->

<div class="demo-description">

<p>Show month and year dropdowns in place of the static month/year header to facilitate navigation through large timeframes.  Add the boolean <code>changeMonth</code> and <code>changeYear</code> options.</p>

</div><!-- End demo-description -->


  </body>
</html>
